import * as turf from "@turf/turf";

const Ranging = {
    // data() {
    //     return {
    //         geojson: {
    //             type: "FeatureCollection",
    //             features: [],
    //         }
    //     }
    // },
    methods: {
        cj(map) {
            console.log(this.geojson.features)
            let _this = this
            let distanceContainer = this.$refs["distance"];
            // GeoJSON object to hold our measurement features
            // var geojson = {
            //     type: "FeatureCollection",
            //     features: [],
            // };

            var linestring = {
                type: "Feature",
                geometry: {
                    type: "LineString",
                    coordinates: [],
                },
            };

            map.on("load", function () {
                map.addSource("geojson", {
                    type: "geojson",
                    data: _this.geojson,
                });

                // Add styles to the map
                map.addLayer({
                    id: "measure-points",
                    type: "circle",
                    source: "geojson",
                    paint: {
                        "circle-radius": 5,
                        "circle-color": "#fff",
                    },
                    filter: ["in", "$type", "Point"],
                });
                map.addLayer({
                    id: "measure-lines",
                    type: "line",
                    source: "geojson",
                    layout: {
                        "line-cap": "round",
                        "line-join": "round",
                    },
                    paint: {
                        "line-color": "#fff",
                        "line-width": 2.5,
                    },
                    filter: ["in", "$type", "LineString"],
                });
                let features
                map.on("click", function (e) {
                    e.preventDefault();
                    if (_this.$store.state.Map.openDistance) {
                        features = map.queryRenderedFeatures(e.point, {
                            layers: ["measure-points"],
                        });
                        // Remove the linestring from the group
                        // So we can redraw it based on the points collection
                        if (_this.geojson.features.length > 1) _this.geojson.features.pop();
                        // Clear the Distance container to populate it with a new value
                        distanceContainer.innerHTML = "";
                        // If a feature was clicked, remove it from the map
                        if (features.length) {
                            var id = features[0].properties.id;
                            _this.geojson.features = _this.geojson.features.filter(function (point) {
                                return point.properties.id !== id;
                            });
                        } else {
                            var point = {
                                type: "Feature",
                                geometry: {
                                    type: "Point",
                                    coordinates: [e.lngLat.lng, e.lngLat.lat],
                                },
                                properties: {
                                    id: String(new Date().getTime()),
                                },
                            };
                            _this.geojson.features.push(point);
                        }
                        if (_this.geojson.features.length > 1) {
                            linestring.geometry.coordinates = _this.geojson.features.map(function (
                                point
                            ) {
                                return point.geometry.coordinates;
                            });
                            _this.geojson.features.push(linestring);
                            // Populate the distanceContainer with total distance
                            var value = document.createElement("pre");
                            value.textContent =
                                "总公里数 " + turf.length(linestring).toLocaleString() + "km";
                            distanceContainer.appendChild(value);
                        }
                        map.getSource("geojson").setData(_this.geojson);
                    } else {
                        distanceContainer.innerHTML = "";
                        _this.geojson.features = []
                        return false
                    }

                });
            });

            map.on("dblclick", function (e) {
                e.preventDefault();
                // 禁止双击缩放
                map.doubleClickZoom.disable();
                map.getCanvas().style.cursor = 'default';
                distanceContainer.innerHTML = "";
                _this.geojson.features = []
            })

            // map.on("mousemove", function (e) {
            //     var features = map.queryRenderedFeatures(e.point, {
            //         layers: ["measure-points"],
            //     });
            //     // UI indicator for clicking/hovering a point on the map
            //     map.getCanvas().style.cursor = features.length ? "pointer" : "crosshair";
            // });

        }
    },
}

export default Ranging